<!-- 企业信息审核 -->
<template>
  <div class="home-page-content">
    <h3>组织管理</h3>
    <Row>
      <Col span="5" class="tree-box">
        <Row type="flex" justify="space-between" align="middle" class="mb-20">
          <h4>组织架构</h4>
        </Row>
        <Tree :data="treeDataCompany" @on-select-change="selectCompany"></Tree>
      </Col>
      <Col span="4" class="tree-middle-box">
        <div>
          <Row type="flex" justify="space-between" align="middle" class="mb-20">
            <h4>部门架构</h4>
            <!-- <Dropdown @on-click="onClickDropDeptdown">
              <Button type="primary">
                配置
                <Icon type="ios-arrow-down"></Icon>
              </Button>
              <template #list>
                <DropdownMenu>
                  <DropdownItem name="add">新增一级部门</DropdownItem>
                  <DropdownItem name="edit">编辑</DropdownItem>
                </DropdownMenu>
              </template>
            </Dropdown> -->
          </Row>
          <Tree
            :data="treeDataDept"
            @on-select-change="selectCompanyDept"
          ></Tree>
        </div>
      </Col>
      <Col span="15" class="table-box">
        <Row type="flex" justify="space-between" align="middle" class="mb-20">
          <div>人员管理</div>
          <div>
            <Input
              class="search-input"
              search
              placeholder="搜索关键词"
              v-model="formData.realName"
            />
            <Button
              icon="md-search"
              type="primary"
              @click="getOrgAllUserAndStatisticsPageData()"
              >查询</Button
            >
          </div>
        </Row>
        <!-- 
        <div class="com-action-table-btn">
          <Button type="primary" @click="actionDept(1)">新增人员</Button>
          <BtnPlain type="error" @click="actionDept(2)">批量移除</BtnPlain>
          <BtnPlain type="primary" @click="actionDept(3)"
            >部门负责人设置</BtnPlain
          >
          <BtnPlain type="primary" @click="actionDept(4)"
            >部门角色模板</BtnPlain
          >
          <BtnPlain type="warning" @click="actionDept(5)">批量调动</BtnPlain>
        </div> -->
        <Row>
          <Col span="24">
            <Table
              :columns="columns"
              :data="listData"
              @on-selection-change="onSelectionChange"
            >
              <template slot-scope="{ row }" slot="realName">
                <span @click="viewUserInfo">{{ row.realName }}</span>
              </template>
              <template slot-scope="{ row }" slot="action">
                <!-- <BtnText type="warning" @BtnClick="onRemove(row)">调动</BtnText> -->
                <BtnText type="primary" @BtnClick="resetPassword(row)"
                  >密码重置</BtnText
                >
                <BtnText :type=" row.accountStatus == 'Normal' ? 'error' : 'green'" @BtnClick="headleDisable(row)"
                  >{{ row.accountStatus == 'Normal' ? "禁用" : "启用"}}</BtnText
                >
                <BtnText type="green" @BtnClick="onUserRole(row)"
                  >配置角色</BtnText
                >
                <!-- <BtnText type="error" @BtnClick="onRemove(row)">移除</BtnText> -->
              </template>
            </Table>
          </Col>
        </Row>
        <PageAtion
          v-if="total"
          :total="total"
          :size.sync="formData.size"
          :page.sync="formData.page"
          @pageSizeChange="pageSizeChange"
        />
      </Col>
    </Row>
    <Company
      v-if="isHide"
      :isHide="isHide"
      :updateIsHide.sync="isHide"
      :titleName="titleName"
      :echoData="echoData"
      @actionSuccess="actionCompamySuccess"
    />
    <CompanyDept
      v-if="isDeptHide"
      :isHide="isDeptHide"
      :titleName="titleName"
      :updateIsHide.sync="isDeptHide"
      :echoData="echoData"
      @actionSuccess="actionDeptSuccess"
    />
    <UserInfo
      v-if="isUserInfoHide"
      :isHide="isUserInfoHide"
      :titleName="titleName"
      :updateIsHide.sync="isUserInfoHide"
      :echoData="echoData"
      @actionSuccess="actionDeptSuccess"
    />
    <UserRole
      v-if="isUserRoleHide"
      :isHide="isUserRoleHide"
      :titleName="titleName"
      :updateIsHide.sync="isUserRoleHide"
      :echoData="echoData"
      @actionSuccess="updateRoleSuccess"
    />
  </div>
</template>

<script>
import { debounce } from "lodash";

import {
  getOrgTree,
  getOrgAllUserAndStatisticsPage, // 根据公司查询用户
  resetUserPwd, // 重置密码
  setUserAccount, // 设置用户账号状态
} from "@/api/system.js";

import Company from "./company.vue";
import CompanyDept from "./companyDept.vue";
import UserInfo from "./userInfo.vue";
import UserRole from "./userRole.vue";
import util from "@/libs/util";

export default {
  name: "userOrganizationManage",
  components: {
    Company,
    CompanyDept,
    UserInfo,
    UserRole,
  },
  data() {
    return {
      keywords: "",
      treeDataCompany: [],
      treeDataDept: [],
      formData: {
        page: 1,
        size: 10,
        companyDepartmentId: "",
        companyId: "",
        realName: "",
      },
      columns: [
        // {
        //   type: "selection",
        //   width: 60,
        // },
        {
          title: "用户名称",
          slot: "realName",
        },
        {
          title: "手机号",
          key: "mobile",
        },
        // {
        //   title: "用户角色",
        //   key: "role",
        // },
        {
          title: "发布信息数",
          key: "publishBusinfoCount",
        },
        {
          title: "被企业接受",
          key: "publishBusinfoBeReceiveCount",
        },
        {
          title: "经营信息已投标",
          key: "feedBackAlreadyDeliverTenderBeReceiveCount",
        },
        {
          title: "状态",
          width: 80,
          key: "accountStatusName",
        },
        {
          title: "操作",
          slot: "action",
          width: 240,
          align: "center",
        },
      ],
      listData: [],
      total: 10,
      ids: [],
      isHide: false,
      echoData: {},
      isDeptHide: false,
      isUserInfoHide: false,
      isUserRoleHide: false, // 用户角色
      titleName: "",
    };
  },
  methods: {
    async getOrgTreeAction() {
      let data = await getOrgTree({
        companyId: util.cookies.get("companyId"),
        isShowCompanyDepartment: true,
        isIncludeOneself: true,
        isInclusionchildren: true,
      });
      console.log(data, "data");
      data.forEach((o) => {
        o.title = o.companyName;
        o.expand = true;
        o.id = o.companyId;
      });
      this.treeDataCompany = data;
    },
    // 左侧树形图搜索框
    onSearchTree: debounce(function () {
      console.log("111", this.keywords);
    }, 500),
    pageSizeChange(row) {
      this.formData.page = 1;
      this.formData.size = 10;
      this.listData = [];
      this.getOrgAllUserAndStatisticsPageData();
    },
    // table勾选事件
    onSelectionChange(selection) {
      this.ids = selection.map((it) => it.id);
    },
    onClickDropdown(ev) {
      if (!this.echoData.id) {
        return this.$Message.error("请选择上级公司");
      }
      this.titleName = ev == "add" ? "新增" : "编辑";
      this.isHide = true;
    },
    onClickDropDeptdown() {
      console.log(ev);
      this.isDeptHide = true;
    },
    // 添加编辑公司
    actionCompamySuccess() {
      this.getOrgTreeAction();
    },
    // 选择节点树
    selectCompany(ev) {
      this.formData.page = 1;
      this.formData.size = 10;
      this.listData = [];
      if (ev[0]) {
        this.echoData = ev[0];
        let s = this.echoData.childrenDepartmentList;
        s.forEach((o) => {
          o.title = o.companyDepartmentName;
          o.id = o.companyDepartmentId;
          console.log(o);
        });
        this.treeDataDept = s;
        this.formData.companyId = ev[0].companyId;
        this.getOrgAllUserAndStatisticsPageData();
      } else {
        this.formData.companyId = "";
        this.listData = [];
        this.echoData = {};
        this.treeDataDept = [];
      }
    },
    selectCompanyDept(ev) {
      this.formData.page = 1;
      this.formData.size = 10;
      this.listData = [];
      if (ev.length) {
        this.formData.companyDepartmentId = ev[0].companyDepartmentId;
        this.getOrgAllUserAndStatisticsPageData();
      } else {
        this.formData.companyDepartmentId = "";
        this.formData.companyDepartmentId = "";
        this.getOrgAllUserAndStatisticsPageData();
      }
    },
    async getOrgAllUserAndStatisticsPageData() {
      let data = await getOrgAllUserAndStatisticsPage(this.formData);
      console.log(data, "getOrgAllUserAndStatisticsPageData");
      this.listData = data.data;
      this.total = data.total;
    },
    viewUserInfo(row) {
      this.echoData = row;
      this.isUserInfoHide = true;
    },
    onUserRole(row) {
      this.titleName = "修改用户角色";
      this.echoData = row;
      this.isUserRoleHide = true;
    },
    // 修改角色成功
    updateRoleSuccess() {
      this.getOrgAllUserAndStatisticsPageData();
    },
    // 重置密码
    resetPassword(item) {
      this.$Modal.confirm({
        title: "重置密码",
        content: "<p>确认重置用户密码？</p>",
        loading: true,
        onOk: async () => {
          let params = {
            userId: item.userId,
          };
          let data = await resetUserPwd(params);
          this.$Modal.remove();
          this.$Message.success("密码重置成功！");
        },
      });
    },
    // 账号禁用
    headleDisable(item) {
      let msg = item.accountStatus == "Normal" ? "启用" : "禁用";
      this.$Modal.confirm({
        title: msg + "账号",
        content: "<p>确认" + msg + "用户密码？</p>",
        loading: true,
        onOk: async () => {
          let params = {
            userId: item.userId,
          };
          let data = await setUserAccount(params);
          this.$Modal.remove();
          this.$Message.success("状态设置成功！");
        },
      });
    },
  },
  mounted() {
    this.getOrgTreeAction();
  },
};
</script>

<style lang="less" scoped>
.tree-box {
  padding: 20px 20px 0 0;
  border-right: 1px solid #eee;
}
.table-box {
  padding: 20px 0 0 20px;
}
.search-input {
  width: 300px;
  margin-right: 20px;
}
.mt-20 {
  margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.tree-middle-box {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee;
  > div {
    height: 50%;
    padding: 20px;
    &:nth-of-type(1) {
      // border-bottom: 1px solid #eee;
    }
  }
}
</style>
